
<template>
  <div class="weightManagement">
    <div class="head-box">
      <!-- <van-sticky :offset-top="10"> -->
      <div class="header_body">
        <header-nav class="topes" leftArrow titelText="过磅单管理"></header-nav>
      </div>
      <div class="searchs">
        <van-search @search="onSearch" @clear="clear" v-model="searchStr" shape="round" background="#F8FAFD" placeholder="车牌号/过磅类型" />
      </div>
      <!-- </van-sticky> -->
    </div>
    <div class="body-box">
      <van-empty v-if="formData.length<1" description="暂无此数据..." />
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell class="boty" v-for="(item, i) in formData" :key="item.id">
          <router-link :to="{path:'detail',query:item }">
            <div class="toplist">
              <van-row style="margin-bottom:10px;padding-top:5px" justify="center">
                <van-col span="9" style="padding-left:3px;">{{item.poundNo}}</van-col>
                <van-col span="7">
                  <div class="centerlist">{{item.carNo}}</div>
                </van-col>
                <van-col span="4">
                  <div v-if="item.status==0" class="titleright1">
                    <p style="-webkit-transform: scale(0.9);">正常过磅</p>
                  </div>
                  <div v-if="item.status==1" class="titleright2">
                    <p style="-webkit-transform: scale(0.9);">预保存单</p>
                  </div>
                  <div v-if="item.status==2" class="titleright3">
                    <p style="-webkit-transform: scale(0.9);">标记无效</p>
                  </div>
                  <div v-if="item.status==3" class="titleright4">
                    <p style="-webkit-transform: scale(0.9);">作废磅单</p>
                  </div>
                  <div v-if="item.status==5" class="titleright5">
                    <p style="-webkit-transform: scale(0.9);">已删除单</p>
                  </div>
                </van-col>
                <van-col span="4">
                  <div v-if="item.orderType=='采购订单'" class="titleright">
                    <p style="-webkit-transform: scale(0.9);">采购订单</p>
                  </div>
                  <div v-if="item.orderType=='销售订单'" class="titleright">
                    <p style="-webkit-transform: scale(0.9);">销售订单</p>
                  </div>
                  <div v-if="item.orderType=='内转单'" class="titleright">
                    <p style="-webkit-transform: scale(0.9);">内转运单</p>
                  </div>
                </van-col>
              </van-row>
              <van-row>
                <van-col span="7">
                  <div style="-webkit-transform: scale(0.8); margin-left:-5%">
                    <div class="lefttitle">
                      <div class="imgdata"></div>
                      <div>物料名称</div>
                    </div>
                    <div class="lefttitle">
                      <div class="imgdata1"></div>
                      <div>{{item.handler}}</div>
                    </div>
                  </div>
                </van-col>
                <van-col span="17">
                  <div class="bordtr">
                    <div style="margin-left:-12%;-webkit-transform: scale(0.8);margin-bottom:1%;margin-top:1%">{{item.goodsName}}</div>
                    <div style="-webkit-transform: scale(0.8);margin-left:-12%">{{item.passTime1}}</div>
                  </div>
                </van-col>

              </van-row>
              <van-row style="-webkit-transform: scale(0.8); margin-left:-39px;margin-top:10px">
                <van-col span="6">
                  <div class="lefttitles">
                    <div class="imgdata2"></div>
                    <div >{{item.goodsWeight}}</div>
                  </div>
                </van-col>
                <van-col span="7">
                  <div class="lefttitles">
                    <div class="imgdata3"></div>
                    <div >{{item.goodsTare}}</div>
                  </div>
                </van-col>
                <van-col span="7">
                  <div class="lefttitles">
                    <div class="imgdata4"></div>
                    <div >{{item.goodsSuttle}}</div>
                  </div>
                </van-col>
                <van-col span="4">
                  <div class="lefttitle">
                    <div class="imgdata5"></div>
                    <div >{{item.coverVaried}}</div>
                  </div>
                </van-col>
              </van-row>
            </div>
          </router-link>
        </van-cell>
      </van-list>

    </div>
  </div>
</template>

<script>
import { useRoute, useRouter } from "vue-router";
import headerNav from "@/components/common/headerNav.vue";
import api from "@/api/index.js";
import { ref, onMounted, reactive, toRefs } from "vue";
export default {
  name: "weightManagement",
  components: {
    headerNav,
  },
  setup() {
    const loading = ref(false);
    const finished = ref(false);
    const searchStr = ref("");
    const route = useRoute();
    const router = useRouter();
    const data = reactive({
      formData: {},
    });
    let pageIndex = 0;
    let pageInfo = {
      pageSize: 50,
      current: 1,
    };
    const onLoad = () => {
      pageIndex++;
      pageInfo.pageSize = pageIndex * 50;
      methods.paginationpassPoundBill();
    };

    const methods = reactive({
      // 搜索时
      onSearch() {
        methods.paginationpassPoundBill();
      },

      clear() {
        console.log("清除条件", 123);
        methods.paginationpassPoundBill();
      },
      async paginationpassPoundBill() {
        let params = {
          billBelong: "",
          carNo: searchStr.value,
          orderType: "",
          createTime: "",
          datePicker: [],
          endTime: "",
          goodsName: "",
          poundNo: "",
          status: "",
        };
        let orderTypeList = [
          { key: "正常过磅", value: "0" },
          { key: "预保存", value: "1" },
          { key: "标记无效", value: "2" },
          { key: "作废磅单", value: "3" },
          { key: "删除", value: "5" },
        ];
        if (searchStr.value) {
          orderTypeList.forEach((item) => {
            let orderFlag = item.key.indexOf(searchStr.value) != -1;
            if (orderFlag) {
              params.carNo = "";
              params.status = item.value;
            }
          });
        } else {
          params.carNo = "";
          params.status = "";
        }

        let { recordsTotal, data: data1 } = await api.paginationpassPoundBill(
          pageInfo,
          params
        );
        data.formData = data1;
        loading.value = false;
        if (recordsTotal == data1.length) {
          finished.value = true;
        }
      },
    });

    onMounted(() => {
      // methods.onSearch();
    });

    return {
      onLoad,
      loading,
      finished,
      searchStr,
      route,
      router,
      ...toRefs(data),
      ...methods,
    };
  },
};
</script>

<style lang="less" scoped>
.weightManagement {
  // padding: 15px 0;
  width: 100%;
  height: 100%;
  background: #f8fafd;
  box-sizing: border-box;
  .head-box {
    padding-top: 10px;
  }
  .body-box {
    overflow-y: auto;
    // padding: 5vw 0;
    height: calc(100% - 100px - 10px);
    .boty {
      border-bottom: 15px solid #f8fafd;
      padding: 0 15px;
      // overflow-y: hidden;
      .toplist {
        // border: 1px solid rgb(204, 199, 199);
        font-size: 13px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #3d3d3d;
        background: white;
        .bordtr {
          font-size: 13px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 500;
          height: auto;
          border-left: 1px solid rgba(0, 0, 0, 0.22);
          padding-left: 6%;
        }
        .centerlist {
          font-size: 13px;
          font-family: Source Han Sans CN-Medium, Source Han Sans CN;
          font-weight: 500;
          color: #000000;
        }
        .titleright {
          width: 48px;
          height: 16px;
          background: rgba(15, 206, 140, 0.16);
          border-radius: 2px 2px 2px 2px;
          opacity: 1;
          border: 1px solid rgba(52, 179, 255, 1);
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: rgba(52, 179, 255, 1);
          font-size: 12px;
          position: relative;
          p {
            position: absolute;
            top: -100%;
          }
        }
        .titleright1 {
          width: 48px;
          height: 16px;
          background: rgba(15, 206, 140, 0.16);
          border-radius: 2px 2px 2px 2px;
          opacity: 1;
          border: 1px solid #0fce8c;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #0fce8c;
          font-size: 12px;
          position: relative;
          p {
            position: absolute;
            top: -100%;
          }
        }
        .titleright2 {
          width: 48px;
          height: 16px;
          background: #d4af6a7e;
          border-radius: 2px 2px 2px 2px;
          opacity: 1;
          border: 1px solid #ce8b0f;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #ce8b0f;
          font-size: 12px;
          position: relative;
          p {
            position: absolute;
            top: -100%;
          }
        }
        .titleright3 {
          width: 48px;
          height: 16px;
          background: #ce6cdb46;
          border-radius: 2px 2px 2px 2px;
          opacity: 1;
          border: 1px solid #b80fce;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #b80fce;
          font-size: 12px;
          position: relative;
          p {
            position: absolute;
            top: -100%;
          }
        }
        .titleright4 {
          width: 48px;
          height: 16px;
          background: #6497db7e;
          border-radius: 2px 2px 2px 2px;
          opacity: 1;
          border: 1px solid #0f62ce;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #0f62ce;
          font-size: 12px;
          position: relative;
          p {
            position: absolute;
            top: -100%;
          }
        }
        .titleright5 {
          width: 48px;
          height: 16px;
          background: #e79f9fd8;
          border-radius: 2px 2px 2px 2px;
          opacity: 1;
          border: 1px solid #ce0f0fc9;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #f32004e3;
          font-size: 12px;
          position: relative;
          p {
            position: absolute;
            top: -100%;
          }
        }
        .lefttitle {
          display: flex;
          margin-bottom: 9px;
        }
        .imgdata {
          margin-top: 2px;
          margin-right: 5px;
          width: 16px;
          height: 18px;
          background: url("../../assets/images/r73.png") no-repeat;
          background-size: 100% 100%;
        }
        .imgdata1 {
          margin-top: 2px;
          margin-right: 5px;
          width: 16px;
          height: 18px;
          background: url("../../assets/images/rr.png") no-repeat;
          background-size: 100% 100%;
        }
        .imgdata5 {
          margin-right: 10px;
          margin-left: 10px;
          width: 20px;
          height: 22px;
          background: url("../../assets/images/r63.png") no-repeat;
          background-size: 100% 100%;
        }
      }
      .lefttitles {
        display: flex;
        border-right: 1px solid rgba(0, 0, 0, 1);

        .imgdata2 {
          margin-right: 5px;
          width: 20px;
          height: 22px;
          background: url("../../assets/images/r60.png") no-repeat;
          background-size: 100% 100%;
        }
        .imgdata3 {
          margin-left: 10px;
          margin-right: 5px;
          width: 20px;
          height: 22px;
          background: url("../../assets/images/r61.png") no-repeat;
          background-size: 100% 100%;
        }
        .imgdata4 {
          margin-right: 5px;
          margin-left: 10px;
          width: 20px;
          height: 22px;
          background: url("../../assets/images/r62.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
}
.topes {
  background: #f8fafd !important;
}
</style>
